import { MutableRefObject } from 'react'

export default () => {
  const setIgnoreMouseEvents = <T extends HTMLElement>(el: MutableRefObject<T>) => {
    el.current?.addEventListener('mouseover', (e: MouseEvent) => {
      e.stopPropagation()
      console.log('鼠标移入main区域')
      // 鼠标移入main区域时,关闭鼠标穿透,这样我们能操作软件
      window.api.setIgnoreMouseEvents(false)
    })

    // 给body添加鼠标移入事件，注意body的宽高需要设置为100%
    document.body?.addEventListener('mouseover', (e: MouseEvent) => {
      console.log('鼠标移入body')
      // 鼠标移入body时,开启鼠标穿透，这个判断是移入body元素，而不是子元素
      if (e.target === document.body) {
        window.api.setIgnoreMouseEvents(true, { forward: true })
      }
    })
  }

  return { setIgnoreMouseEvents }
}
